<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20200108-随便练习</title>

	</head>


	<body>

		<div id="app">



			<mycomponent2 @cellchild="catchparent($event)"></mycomponent2>

			<div >
				{{kk}}
			</div>

		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<script type="text/javascript">
			// 全局组件
			// Vue.component("mycomponent",{

			// 	template:"<div>随便写点什么</div>"

			// })	

			//局部组件

			//	父传子	props

			// let mycomponent2 = {

			// 	props:["cellnewsnum"],

			// 	template: "<div>{{cellnewsnum}}</div>"

			// }

			// 子传父	$emit
			let mycomponent2 = {

				data() {

					return {
						newsarray: ["Sylvatica", "khione", "noctura"]
					}

				},


				template: "<button @click='fn'>点击传递数据</button>",
				methods: {

					fn() {
						let _self=this
						this.$emit("cellchild",_self.newsarray)
					}

				}

			}



			let app = new Vue({
				el: "#app",
				data: {
					
					kk:""
					
				},
				components: {
					mycomponent2

				},
				methods: {
					
					catchparent(e){
						
						for (let s of e) {
							
							this.kk += " "+ s
							
						}
						
					}
					
				}

			})
		</script>

	</body>
</html>


<!-- 浅克隆 -->
<!-- 深克隆 -->

<!-- 父传子 props -->
<!-- 子传父 $emit -->
